<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1
			{
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			#span1
			{
				background-color: aquamarine;
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				//所谓的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先的相同时间也会被触发
				//在开发中大部分情况冒泡是有用的，如果不希望发生冒泡事件可以通过事件对象来取消冒泡
				var box1=document.getElementById("box1");
				var span1=document.getElementById("span1");
				box1.onclick=function(event)
				{
					event.cancelBubble=false;   //取消掉冒泡
					alert("这是box1的响应函数");
				}
				span1.onclick=function(event)
				{
					event.cancelBubble=false;
					alert("这是span1的响应函数");
				}
				document.body.onclick=function()
				{
					alert("这是body的响应函数");
				}
				
			}
		</script>
	</head>
	<body>
		<div id="box1">
			<span id="span1">我以为忘了想念</span>
		</div>
	</body>
</html>